<template>
  <div>
    <el-table :data="tableData" empty-text="没有更多数据了~" style="width: 100%" max-height="800">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品描述">
              <span>{{ props.row.record.desc }}</span>
            </el-form-item>
            <el-form-item label="图片">
              <el-popover
                v-for="path in props.row.record.images"
                :key="path"
                trigger="hover"
                placement="bottom"
              >
                <el-image class="amplification" fit="contain" :src="imageUrl(path)"></el-image>
                <el-image class="thumbnail" slot="reference" fit="contain" :src="imageUrl(path)"></el-image>
              </el-popover>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column width="100px" label="记录ID" prop="record.id"></el-table-column>
      <el-table-column width="150px" label="用户名" prop="extra.username"></el-table-column>
      <el-table-column width="200px" label="发布时间">
        <template slot-scope="props">{{ transformTime2Date(props.row.record.time) }}</template>
      </el-table-column>
      <el-table-column label="标题" prop="record.title"></el-table-column>
      <el-table-column width="100px" label="价格">
        <template slot-scope="props">{{ `￥${props.row.record.price}` }}</template>
      </el-table-column>
      <el-table-column width="100px" label="分类">
        <template slot-scope="props">{{ props.row.extra.classes }}</template>
      </el-table-column>
      <el-table-column width="100px" label="状态">
        <template slot-scope="props">
          <span
            :style="{ color: stateTagColor(props.row.record.state) }"
          >{{ stateTag(props.row.record.state) }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="actionModifyState(scope.row, 1)">通过</el-button>
          <el-button size="mini" type="danger" @click="actionModifyState(scope.row, 2)">撤销</el-button>
          <el-button size="mini" type="info" @click="actionModifyState(scope.row, 0)">重置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="tableData.length"></el-pagination>
  </div>
</template>

<script>
import axios from "@/plugin/axios";
import qs from "qs";

export default {
  name: "reviewing",
  data() {
    return {
      tableData: [
        {
          record: {
            id: -1,
            title: "样例标题",
            desc:
              "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            images: '["/res/goods/b13131d679d54d37fa9a73fe48998a47"]',
            price: 100,
            tags: "[]",
            classes: 11,
            latitude: 28.071015,
            longitude: 113.010013,
            state: 0,
            time: 1558699581000,
            userId: 8
          },
          extra: {
            classes: "类别",
            username: "用户名"
          }
        }
      ],
      stateTags: ["待审核", "通过", "未通过", "已卖掉"],
      stateTagColors: ["#9e9e9e", "#4caf50", "#f44336", "#ff9800"]
    };
  },
  methods: {
    loadReviewingList() {
      axios.post("/admin/reviewList").then(async data => {
        data.forEach(item => {
          var paths = JSON.parse(item.record.images);
          item.record.images = paths;
        });
        this.tableData = data;
      });
    },
    transformTime2Date: function(time) {
      var date = new Date(time);
      return date.toLocaleString();
    },
    stateTag: function(state) {
      return this.stateTags[state];
    },
    stateTagColor: function(state) {
      return this.stateTagColors[state];
    },
    actionModifyState(row, state) {
      axios
        .post(
          "/admin/change_record_state",
          qs.stringify({
            id: row.record.id,
            state: state
          })
        )
        .then(async data => {
          row.record.state = state;
        });
    },
    imageUrl(path) {
      return `${process.env.VUE_APP_API}${path}`;
    }
  },
  mounted() {
    this.loadReviewingList();
  }
};
</script>


<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

.thumbnail {
  width: 100px;
  height: 100px;
  margin-right: 5px;
}

.amplification {
  width: 400px;
}
</style>

